<template>
  <div>
    <!-- 路由出口的两种写法 -->
    <router-view />
    <!-- <router-view></router-view> -->
    <!-- 6月21号--------------------6月21号 ---->
    <!-- 获取语法 this.$route.meta.方法  在heml结构里面用这个方法可以不用能写 thsi-->
    <!-- v-if="$route.meta.showTab" 控制显示与隐藏 这是获取到router文件夹里面的index.js里面的路由元信息meta:{showTab: true} 进行判断 -->
    <!-- 判断该页面是否要显示 底部(Tabbar 标签栏)页面 -->
    <!-- index.js里面的 meta:{showTab: true} 就是显示 false或者没写就是不显示 -->
    <!-- 记住 router能出现效果但是刷新后 下面4个的高亮样式不能对称 (所以用route 不加r) -->
    <!-- v-model="active" 开启路由后可以删除  高亮效果不变 -->
    <!-- v-model 默认绑定选中标签的索引值，通过修改 v-model 即可切换选中的标签 -->
    <van-tabbar v-model="active" route v-if="$route.meta.showTab">
      <van-tabbar-item to="/home" icon="home-o">首页</van-tabbar-item>
      <van-tabbar-item to="/question" icon="chat-o">问答</van-tabbar-item>
      <van-tabbar-item to="/movie" icon="video-o">视频</van-tabbar-item>
      <van-tabbar-item to="/my" icon="user-o">我的</van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
export default {
  data () {
    return {
      active: ''
    }
  }
}
</script>

<style></style>
